<div ng-controller="DemoCtrl" >

    <div style="border:1px solid gray;"><h5>上传图片弹出框</h5>
        <table>
            <tr>
                <td>
                    <p>
                        <input dv-kind-plugin type="button"
                               config="{pluginType:'image',allowFileManager:true,uploadJson:'/file/import?dir=image',fileManagerJson:'/file/fileManage?'}"
                               id="image1" ng-model="result" value="选择图片"/>（网络图片 + 本地上传）</p>

                    <p><input type="button" class="btn btn-primary btn-success" dv-kind-plugin
                              config="{pluginType:'image',allowFileManager:true,uploadJson:'/file/import?dir=image',fileManagerJson:'/file/fileManage?',showLocal:false}"
                              ng-model="result" value="选择图片"/>（网络图片）</p>

                    <p><input type="button" dv-kind-plugin
                              config="{pluginType:'image',allowFileManager:true,uploadJson:'/file/import?dir=image',fileManagerJson:'/file/fileManage?',showRemote:false}"
                              ng-model="result" value="选择图片"/>（本地上传）</p>
                </td>
                <td>
                    <img style="width:200px;height:200px"  ng-src="{{result}}"/>
                </td>
            </tr>
        </table>
    </div>
    <div class="upload" style="border:1px solid gray;margin-top:15px;">
        <h5>上传文件按钮</h5>
        <input class="ke-input-text" type="text" id="url4" value="{{result1}}" readonly="readonly"/>
        <input name="abcd" type="button" dv-kind-upload
               config="{fieldName:'imgFile',url:'/file/import?dir=file',langType:'simple'}" ng-model="result1"
               value="上传按钮"/>
        <iframe target="abcd" style="width:100px;height:100px;border:0px" ng-src="{{result1}}"></iframe>
    </div>

    <div class="upload" style="border:1px solid gray;margin-top:15px;">
        <h5>批量上传</h5>
        <input type="button" dv-kind-plugin
               config="{pluginType:'multiimage',allowFileManager:true,uploadJson:'/file/import?dir=image',fileManagerJson:'/file/fileManage?',showRemote:false}"
               value="批量上传" ng-model="results"/>

        <div id="J_imageView">
            <div ng-repeat="resulta in results">
                <img style="width:100px;height:100px;" ng-src="{{resulta.url}}"/>
            </div>
        </div>
    </div>

    <div class="upload" style="border:1px solid gray;margin-top:15px;">
        <h5>上传文件弹出框</h5>
        <input class="ke-input-text" id="fileUrl" type="text" id="url6" value="" readonly="readonly"/>
        <input type="button" dv-kind-plugin  config="{pluginType:'insertfile',allowFileManager:true,uploadJson:'/file/import?dir=file',fileManagerJson:'/file/fileManage?'}" ng-model="result2"  value="上传文件弹出框"/>
        <iframe target="abcd" style="width:100px;height:100px;border:0px" ng-src="{{result2}}"></iframe>
    </div>
    <div class="upload" style="border:1px solid gray;margin-top:15px;">
        <h5>浏览服务器</h5>
        <input type="text" id="url" value=""/>
        <input type="button" dv-kind-plugin config="{pluginType:'filemanager',allowFileManager:true,uploadJson:'/file/import?dir=image',fileManagerJson:'/file/fileManage?',showRemote:false}" value="浏览服务器" ng-model="result3"/>
        <img ng-src="{{result3}}" style="width:100px;height:100px;"/>
    </div>
<div  nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter"  config="{ url: '/foo' }">
    <div class="row">

        <div class="col-md-3">

            <h3>Select files</h3>

            <div ng-show="uploader.isHTML5">
                <!-- 3. nv-file-over uploader="link" over-class="className" -->
                <div class="well my-drop-zone" nv-file-over="" uploader="uploader">
                    Base drop zone
                </div>

                <!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
                <div nv-file-drop="" uploader="uploader" options="{ url: '/file/import?isAjax=1' }">
                    <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone">
                        Another drop zone with its own settings
                    </div>
                </div>
            </div>

            <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
            Multiple
            <input type="file" nv-file-select="" uploader="uploader" multiple  /><br/>

            Single
            <input type="file" nv-file-select="" uploader="uploader" />
        </div>

        <div class="col-md-9" style="margin-bottom: 40px">

            <h3>Upload queue</h3>
            <p>Queue length: {{ uploader.queue.length }}</p>

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th ng-show="uploader.isHTML5">Size</th>
                    <th ng-show="uploader.isHTML5">Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in uploader.queue">
                    <td><strong>{{ item.file.name }}</strong></td>
                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                    <td ng-show="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span> Upload
                        </button>
                        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                        </button>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div>
                <div>
                    Queue progress:
                    <div class="progress" style="">
                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                    </div>
                </div>
                <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> Upload all
                </button>
                <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                </button>
                <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> Remove all
                </button>
            </div>

        </div>

    </div>
</div>
    <script type="text/javascript">
        $("input[type='button']").addClass("btn btn-primary btn-success");
        $(".ke-button-common").addClass("btn btn-primary btn-success");

    </script>
</div>



